React useFormStatus Async Validation: Ενημερώσεις Ασύγχρονου Στάτους Φόρμας

Στη σύγχρονη ανάπτυξη web, οι φόρμες είναι ένα κρίσιμο στοιχείο για την αλληλεπίδραση με τον χρήστη. Η διασφάλιση της εγκυρότητας των δεδομένων και η παροχή ανατροφοδότησης σε πραγματικό χρόνο είναι υψίστης σημασίας για μια θετική εμπειρία χρήστη. Το hook useFormStatus του React, που εισήχθη στο React 18, προσφέρει έναν ισχυρό και κομψό τρόπο διαχείρισης της κατάστασης των υποβολών φόρμας, ειδικά όταν πρόκειται για ασύγχρονο έλεγχο εγκυρότητας. Αυτό το άρθρο εμβαθύνει στις περιπλοκές του useFormStatus, εστιάζοντας σε ασύγχρονα σενάρια ελέγχου εγκυρότητας, παρέχοντας πρακτικά παραδείγματα και περιγράφοντας βέλτιστες πρακτικές για τη δημιουργία εύρωστων και φιλικών προς τον χρήστη φορμών.

Κατανόηση των βασικών του useFormStatus

Το hook useFormStatus παρέχει πληροφορίες σχετικά με την τελευταία υποβολή φόρμας που ενεργοποίησε ένα ή μέσα σε ένα <form>. Επιστρέφει ένα αντικείμενο με τις ακόλουθες ιδιότητες:

• pending: Ένα boolean που υποδεικνύει εάν η υποβολή της φόρμας βρίσκεται σε εκκρεμότητα.
• data: Τα δεδομένα που σχετίζονται με την υποβολή της φόρμας, εάν είναι διαθέσιμα.
• method: Η μέθοδος HTTP που χρησιμοποιείται για την υποβολή της φόρμας (π.χ., 'get' ή 'post').
• action: Η συνάρτηση που χρησιμοποιείται ως δράση της φόρμας.

Αν και φαινομενικά απλό, το useFormStatus γίνεται απίστευτα πολύτιμο όταν πρόκειται για ασύγχρονες λειτουργίες, όπως η επικύρωση της εισόδου χρήστη σε έναν απομακρυσμένο διακομιστή ή η εκτέλεση σύνθετων μετασχηματισμών δεδομένων πριν από την υποβολή.

Η ανάγκη για ασύγχρονη επικύρωση

Ο παραδοσιακός σύγχρονος έλεγχος εγκυρότητας, όπου οι έλεγχοι εκτελούνται αμέσως μέσα στο πρόγραμμα περιήγησης, είναι συχνά ανεπαρκής για πραγματικές εφαρμογές. Εξετάστε αυτά τα σενάρια:

• Διαθεσιμότητα ονόματος χρήστη: Η επαλήθευση του εάν ένα όνομα χρήστη έχει ήδη ληφθεί απαιτεί αναζήτηση στη βάση δεδομένων.
• Επαλήθευση email: Η αποστολή ενός email επαλήθευσης και η επιβεβαίωση της εγκυρότητάς του απαιτεί αλληλεπίδραση από την πλευρά του διακομιστή.
• Επεξεργασία πληρωμών: Η επικύρωση των στοιχείων της πιστωτικής κάρτας περιλαμβάνει επικοινωνία με μια πύλη πληρωμών.
• Αυτόματη συμπλήρωση διεύθυνσης: Η πρόταση επιλογών διεύθυνσης καθώς ο χρήστης πληκτρολογεί απαιτεί κλήση ενός εξωτερικού API.

Αυτά τα σενάρια εγγενώς περιλαμβάνουν ασύγχρονες λειτουργίες. Το useFormStatus, σε συνδυασμό με ασύγχρονες συναρτήσεις, μας επιτρέπει να χειριζόμαστε αυτούς τους ελέγχους εγκυρότητας με χάρη, παρέχοντας άμεση ανατροφοδότηση στον χρήστη χωρίς να μπλοκάρουμε το UI.

Εφαρμογή ασύγχρονου ελέγχου εγκυρότητας με useFormStatus

Ας εξερευνήσουμε ένα πρακτικό παράδειγμα επικύρωσης της διαθεσιμότητας ενός ονόματος χρήστη ασύγχρονα.

Παράδειγμα: Ασύγχρονος έλεγχος εγκυρότητας ονόματος χρήστη

Πρώτον, θα δημιουργήσουμε ένα απλό στοιχείο React με μια φόρμα και ένα κουμπί υποβολής.

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

function UsernameForm() {
  const [username, setUsername] = useState('');
  const [isPending, startTransition] = useTransition();

  async function handleSubmit(formData) {
    "use server";
    const username = formData.get('username');

    // Simulate an API call to check username availability
    await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate network latency

    const isAvailable = username !== 'taken'; // Mock availability check

    if (!isAvailable) {
      throw new Error('Username is already taken.');
    }

    console.log('Username is available!');
    // Perform actual form submission here
  }

  return (
    <form action={handleSubmit}>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <button type="submit" disabled={isPending}>
        {isPending ? 'Checking...' : 'Submit'}
      </button>
       <StatusComponent />
    </form>
  );
}

function StatusComponent() {
    const { pending, data, method, action } = useFormStatus();

    return (
        <p>
          {pending && "Submitting..."}
          {data && <pre>{JSON.stringify(data)}</pre>}
        </p>
    )
}

export default UsernameForm;

            

              

Copy